﻿@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
    ViewBag.Title = "AssessmentTest";
}
<style type="text/css">
    body{
        padding-top:0;
    }

    .remove-img-banner {
        background: rgba(0, 0, 0, 0.6);
        padding-top: 5px;
        padding-left: 10px;
        width: 30px;
        height: 30px;
        color: white;
        position: absolute;
        cursor: pointer;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: center;
    }


</style>

<h4>Test</h4>

<div id="videoPlayer" style="position:relative;display:inline-block;">
    <input type="file" id="videoFileInput" accept="video/*" />
    <div id="removeVideoButton" class="remove-video" onclick="removeVideo(this);" style="display:none; vertical-align:top;"><i class="fa fa-times" aria-hidden="true"></i></div>
    <img id="playVideoImg" src="~/Content/images/buttons/play.gif" style="position:absolute;z-index:100;top:0;left:0;" onclick="playVideo();" />
    <video id="videoDisplay"></video>
</div>

@*<button class="btn btn-primary" onclick="capture()">Capture</button> <br /><br />*@
@*<canvas id="canvas"></canvas> <br /><br />*@
@*<input type="file" id="fileInput">*@

@section scripts {
<script type="text/javascript">
    function playVideo() {
        debugger;
        console.log("playVideo");
        var videoNode = $("#videoDisplay")[0];
        videoNode.play();
        $("#playVideoImg").hide();
    }

    function removeVideo() {
        $("#videoFileInput").show();
        var videoNode = $("#videoDisplay")[0];
        videoNode.src = "";

        $("#playVideoImg").hide();
        $("#removeVideoButton").hide();
        $("#videoFileInput").val("");
    }

    (function ($) {
        "use strict";
        
        $("#videoDisplay").on("ended", function (e) {
            $("#playVideoImg").show();
        });

        $("#videoFileInput").change(function (e) {
            var file,
                fileType,
                fileReader;

            fileReader = new FileReader();
            fileReader.onload = function (e) {
                debugger;
            }

            file = e.target.files[0];
            fileType = file.type;
            var videoNode = $("#videoDisplay")[0];

            var fileUrl = window.URL.createObjectURL(file);
            videoNode.src = fileUrl;

            //fileReader.readAsDataURL(file);

            $("#videoFileInput").hide();
            $("#playVideoImg").show();
            $("#playVideoImg").css("left", ($("#videoDisplay").width() / 2) - (123 / 2));
            $("#playVideoImg").css("top", ($("#videoDisplay").height() / 2) - (123 / 2));

            $("#removeVideoButton").show();
            $("#removeVideoButton").css("display", "inline-block");


            //$("#videoPlayer").append("<button id=\"videoPlayButton\" style=\"position:absolute;top:0; left:0;\" onclick=\"playVideo();\">Play</button>");
            //$("#videoPlayer").append("<button id=\"removeVideo\" style=\"position:absolute;top:0; left:0;\" onclick=\"playVideo();\">Remove</button>");


        });

        $(document).ready(function () {
            
        });

    }(jQuery));
</script>
}